<template>
  <div class="animated-banner">
    <div class="inner">
      <slot></slot>
    </div>
    <!-- 背景 -->
    <div id="momoland">
      <div class="wrapper">
        <br /><br /><br />
        <div id="carbon-block"></div>
        <div></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import './js.js'

onMounted(() => {
  window.daisyjs(document.getElementById('momoland'), {
        dotColor: '#fff',
        lineColor: '#ddd'
      })
})
</script>

<style lang="scss" scoped>
#momoland {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-image: linear-gradient(to right top, #d16ba5, #86a8e7, #5ffbf1);
}
.wrapper {
  position: absolute;
  left: 0;
  top: 15%;
  padding: 0 20px;
  width: 100%;
  text-align: center;
}
.wrapper > img {
  width: 200px;
  height: auto;
}

.animated-banner {
  height: 100%;
  min-height: 155px;
  position: relative;
  overflow: hidden;
  .inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
  }
}
</style>
